<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script src="jquery.js"></script>

</head>
<body>

<form action="/getBooks">
  <div>
    <a href="/toAddPage">添加图书</a> <br>
    <div>图书名称：<input type="text" th:value="${book.name}" name="name"></div>
    <div>图书类别：<input type="text" th:value="${book.category}" name="category"></div>
    <div>图书作者：<input type="text" th:value="${book.author}" name="author"></div>
    <div><input type="submit" value="搜索"></div>
  </div>
</form>


  <h1>展示所有书籍</h1>
  <form action="/del" method="post" id="form">
    <table border="1px">
      <tr>
        <th>选择</th>
        <th>编号</th>
        <th>书名</th>
        <th>价格</th>
        <th>类目</th>
        <th>库存</th>
        <th>说明</th>
        <th>作者</th>
        <th>已售</th>
      </tr>
      <tr th:each="book : ${list}">
        <td>
          <input type="checkbox" name="ids" th:value="${book.id}">
        </td>
        <td th:text="${book.id}"></td>
        <td th:text="${book.name}"></td>
        <td th:text="${book.price}"></td>
        <td th:text="${book.category}"></td>
        <td th:text="${book.pnum}"></td>
        <td th:text="${book.description}"></td>
        <td th:text="${book.author}"></td>
        <td th:text="${book.sales}"></td>
      </tr>
      <tr>
        <input type="submit" value="批量删除" >
      </tr>
    </table>
  </form>

<div>
  总页数:<span th:text="${page.pages}"></span>
  总记录数:<span th:text="${page.total}"></span>
  页面尺寸:<span th:text="${page.size}"></span>
  当前页记录数:<span th:text="${page.size}"></span>

  <br>
  <span th:if="${page.hasPrevious()}">
    <a th:href="@{/getBooks(pageNum=${page.current-1})}">上一页</a>
  </span>

  <span th:each="num :${#numbers.sequence(1,page.pages)}">
      <a th:href="@{/getBooks(pageNum=${num})}" th:text="${num}"></a>
  </span>

  <span th:if="${page.hasNext()}">
    <a th:href="@{/getBooks(pageNum=${page.current+1})}">下一页</a>
  </span>
</div>


<script>

  $("#form").submit(function (){

    if ($("input[name='ids']:checked").length === 0) {
      alert("请至少选择一个删除")
      return false;
    }

    if (confirm("确定要删除吗？")) {

    } else {
      return false;
    }
  })
</script>
</body>
</html>